"use client";



import { useState } from 'react'
import {motion,AnimatePresence} from 'framer-motion'


export default function Page () {

  const [open,setOpen] = useState(false);

  return (
   <div className={'w-72 p-5 mx-auto mt-20 flex flex-col gap-y-px'}>
     <button className={"bg-purple-700 p-3 text-white rounded"}
      onClick={()=>setOpen(!open)}>按钮</button>
     <AnimatePresence>
       {
         open && (
           <motion.ul className= {"bg-blue-500 p-3 text-white flex flex-col gap-y-3 rounded origin-top"}
           initial={{scaleY:0}}
           animate={{scaleY:1}}
           exit={{scaleY:0}}>
             {
               [1,2,3,4,5,6,7,8,9].map( number =>(
                 <li className={"p-2 hover:bg-pink-600 duration-300 rounded"} key={number}>{number}</li>
               ))
             }
           </motion.ul>
         )
       }
     </AnimatePresence>
   </div>
  )
}
